{% extends 'base.html' %}

{% block content %}
<div class="pagetitle">
  <ul class="breadcrumb">
    <li class="breadcrumb-item active"><a href="/app/index">首页</a></li>
  </ul>
</div>
<section class="section dashboard">
  <div class="row">
    <!-- 左侧列 -->
    <div class="col-lg-8">
      <div class="row">

        <div class="col-xxl-4 col-md-6">
          <div class="card info-card sales-card">
            <div class="card-body">
              <h5 class="card-title">5A级景点的个数</h5>
              <div class="d-flex align-items-center">
                <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                  <i class="bi bi-cart"></i>
                </div>
                <div class="ps-3">
                  <h6>{{ count_5a }}个</h6>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-xxl-4 col-md-6">
          <div class="card info-card revenue-card">
            <div class="card-body">
              <h5 class="card-title">评论最多的景区</h5>
              <div class="d-flex align-items-center">
                <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                  <i class="bi bi-currency-dollar"></i>
                </div>
                <div class="ps-3">
                  <h6>{{ title }}</h6>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="col-xxl-4 col-xl-12">
          <div class="card info-card customers-card">
            <div class="card-body">
              <h5 class="card-title">拥有景点最多的省份</span></h5>
              <div class="d-flex align-items-center">
                <div class="card-icon rounded-circle d-flex align-items-center justify-content-center">
                  <i class="bi bi-people"></i>
                </div>
                <div class="ps-3">
                  <h6>{{ province }}</h6>
                </div>
              </div>
            </div>
          </div>

        </div>

        <div class="col-12">
          <div class="card">
            <div class="card-body">
              <div id="echart1" style="width:100%;height:450px"></div>
            </div>
          </div>
        </div>

      </div>
    </div>

    <!-- 右侧列 -->
    <div class="col-lg-4">

      <div class="card">
        <div class="card-body">
          <h5 class="card-title">评分排名前10景点</h5>
          <div class="activity">

            {% for travel in top10 %}
            <a href="{{ travel.detailUrl }}" target="_blank">
              <div class="activity-item d-flex" style="margin-bottom:5px">
                <img style="width:50px;height:50px;object-fit:cover;margin-right:5px;" src="{{ travel.cover }}" alt="">
                <div class="activite-label">{{ travel.title }}</div>
                <i class='bi bi-circle-fill activity-badge text-danger align-self-start'></i>
                <div class="activity-content">
                  <span style="color:orange!important;" class="fw-bold text-dark">{{ travel.score }}分</span>
                </div>
              </div>
            </a>
            {% endfor %}

          </div>
        </div>
      </div>

    </div>
  </div>
</section>
{% endblock %}

{% block js %}
<script>
  var provinces = JSON.parse('{{ provinces|escapejs }}');
  var values = JSON.parse('{{ values|escapejs }}');
  var myChart = echarts.init(document.getElementById('echart1'));

  var option = {
    title: {
      text: '各省TOP景点数量排行'
    },
    tooltip: {},
    xAxis: {
      type: 'category',
      data: provinces,
      axisLabel: {
        rotate: 45
      }
    },
    yAxis: {
      type: 'value'
    },
    series: [{
      name: '景点数量',
      type: 'bar',
      data: values,
      itemStyle: {
        color: '#5470C6'
      }
    }]
  };

  myChart.setOption(option);
</script>
{% endblock %}